<template>
  <div>
    <div style="float: left">
      <el-upload
          action
          accept=".xlsx, .xls"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handle"
      >
        <el-button type="info" slot="trigger">选取Excel文件</el-button>
      </el-upload>
    </div>
    <div style="float: left;margin-left: 20px">
      <el-button type="primary" :disabled="disable" @click="submit">采集数据提交</el-button>
    </div>

    <div>
      <router-link to="/excel">
        <el-tooltip content="返回列表" style="margin-left: 600px;" transition="el-zoom-in-center" effect="dark" placement="top">
          <i  class="el-icon-tickets"></i>
        </el-tooltip>
      </router-link>
    </div>

    <div style="padding-top: 40px;color: red;">
      <h3>
        <i class="el-icon-info"></i>
        小主,以下是采集完成的数据，请您检查无误后，点击“采集数据提交”按钮上传至服务器！
      </h3>
    </div>
    <el-divider></el-divider>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          label="真实姓名"
          align="center"
          prop="realName"
      >
      </el-table-column>
      <el-table-column
          label="登录名"
          align="center"
          prop="username"
      >
      </el-table-column>
      <el-table-column
          prop="phoneNumber"
          label="手机号"
          align="center">
      </el-table-column>
      <el-table-column
          prop="region"
          label="地址"
          align="center">
      </el-table-column>
      <el-table-column
          label="性别"
          align="center">
        <template slot-scope="scope">{{ scope.row.sex == '0' ? '男' : scope.row.sex == '1' ? '女' : '保密' }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//解析数据
import xlsx from 'xlsx';
import {readFile, chToES} from '../utils/utils';

export default {
  name: "Upload",
  data() {
    return {
      tableData: [],
      disable: false
    }
  },
  methods: {
    async handle(ev) {
      let file = ev.raw;
      if (!file) {
        return;
      }
      //读取file中的二进制数据
      let data = await readFile(file);
      //读取二进制数据
      let workbook = xlsx.read(data, {type: "binary"});

      let worksheet = workbook.Sheets[workbook.SheetNames[0]];
      //转为json格式数据
      data = xlsx.utils.sheet_to_json(worksheet);

      //把读出来的数据处理对应的名称(真实姓名:realName  电话:phoneNumber)
      let arr = chToES(data);
      this.tableData = arr;
    },
    async submit() {
      if (this.tableData.length <= 0) {
        this.$message.error("请上传文件");
        return;
      }
      this.disable = true;
      let userList = [];
      this.tableData.forEach(item => {
        let parm = {};
        parm.username = item.username;
        parm.realName = item.realName;
        parm.sex = item.sex;
        parm.region = parm.region;
        userList.push(parm);
      })
      this.axios.post("/user/uploadExcel", userList).then(resp => {
        if (resp.data.statusCode == 200) {
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
          this.disable = false;
        }
      })

    }
  }
}
</script>

<style scoped>

</style>
